<template>
    <div class="homeTotal">
        <div class="topDiv">
            <div class="titleDiv">
                <div class="title">基础信息数据汇总</div>
                <div class="title titlelast">活动分析</div>
            </div>
            <div class="loopDiv">
                <div class="loopItem item1">
                    <div class="num">
                        <div class="inNum">{{ basicData.hostCount }}</div>
                        <div class="unit">人</div>
                    </div>
                    <div class="name">
                        主持人
                    </div>
                    <div class="icon">
                        <img src="../../assets/home/homeIcon1.png" alt="">
                        <i class="el-icon-user-solid"></i></img>
                    </div>
                </div>
                <div class="loopItem item2">
                    <div class="num">
                        <div class="inNum">{{ basicData.supervisorCount }}</div>
                        <div class="unit">人</div>
                    </div>
                    <div class="name">
                        督导
                    </div>
                    <div class="icon">
                        <img src="../../assets/home/homeIcon2.png" alt="">
                        <i class="el-icon-s-custom"></i></img>
                    </div>
                </div>
                <div class="loopItem item3">
                    <div class="num">
                        <div class="inNum">{{ basicData.partnerCompany }}</div>
                        <div class="unit">家</div>
                    </div>
                    <div class="name">
                        合作公司
                    </div>
                    <div class="icon">
                        <img src="../../assets/home/homeIcon3.png" alt="">
                        <i class="el-icon-s-cooperation"></i></img>
                    </div>
                </div>
                <div class="loopItem item4">
                    <div class="num">
                        <div class="inNum">{{ basicData.activityAnalysis }}</div>
                        <div class="unit">次</div>
                    </div>
                    <div class="name">
                        内训活动
                    </div>
                    <div class="icon">
                        <img src="../../assets/home/homeIcon4.png" alt="">
                        <i class="el-icon-s-order"></i></img>
                    </div>
                </div>
            </div>
        </div>
        <div class="botDiv">
            <div class="leftDiv">
                <div class="nameDiv">
                    <div class="title">档期数据汇总</div>
                    <el-date-picker size="small" v-model="year" value-format="yyyy" type="year" placeholder="选择年"
                        @change="changeYear">
                    </el-date-picker>
                </div>
                <div class="loopDiv">
                    <div class="loopIn1">
                        <div class="inItem1">
                            <div
                                style="width: 35px;height:35px;border-radius: 50%;background-color: #409EFF;text-align: center;line-height: 35px;color: #fff;font-size: 18px;margin-right: 8px;">
                                <i class="el-icon-user-solid"></i>
                            </div>
                            <span>主持人</span>
                        </div>
                        <div class="inItem2">
                            <div class="itemInit" v-for="(item, i) in hostData" :key="i"
                                :style="{ 'borderLeft':`5px solid ${item.color}` }">
                                
                                <div style="font-size: 15px;">{{
                                    item.label }}
                                    <!-- <i :class="item.icon" :style="{ 'color': item.iconColor }"></i> -->
                                </div>
                                <div style="font-size: 20px;font-weight: 700;line-height: 30px;"><span>{{ hostList[item.val] }}</span><span>{{ item.unit }}</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="loopIn1 loopI2">
                        <div class="inItem1">
                            <div
                                style="width: 35px;height:35px;border-radius: 50%;background-color: rgb(108 117 125 / var(--tw-text-opacity, 1));text-align: center;line-height: 35px;color: #fff;font-size: 18px;margin-right: 8px;">
                                <i class="el-icon-s-custom"></i>
                            </div>
                            <span>督导</span>
                        </div>
                        <div class="inItem2">
                            <div class="itemInit" v-for="(item, i) in hostData" :key="i"
                                :style="{ 'borderLeft':`5px solid ${item.color}` }">
                                
                                <div style="font-size: 15px;">{{
                                    item.label }}
                                </div>
                                <div style="font-size: 20px;font-weight: 700;line-height: 30px;"><span>{{ supervisorList[item.val] }}</span><span>{{ item.unit }}</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rightDiv">
                <div class="title">个人档期完成情况</div>
                <div class="chart" ref="chart1"></div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            basicData: {
                hostCount: 90,
                supervisorCount: 80,
                partnerCompany: 100,
                activityAnalysis: 100
            },
            year: new Date().getFullYear().toString(),
            hostList: {
                count: 400000, //总数
                domesticAssignment: 200000, //内派
                dispatch: 200000, //外派
                income: 1010 //总收入
            },
            hostData: [
                {
                    label: '总单数',
                    val: 'count',
                    unit: '单',
                    color: 'rgba(30, 159, 242, 1)',
                    icon: 'el-icon-user-solid',
                    iconColor: '#1E9FF2'
                },
                {
                    label: '总收入',
                    val: 'income',
                    unit: '￥',
                    color: 'rgba(132, 0, 255, 1)',
                    icon: 'el-icon-s-platform',
                    iconColor: 'rgb(194, 128, 255)'
                },
                {
                    label: '内派单数',
                    val: 'domesticAssignment',
                    unit: '单',
                    color: 'rgba(255, 98, 98, 1)',
                    icon: 'el-icon-s-order',
                    iconColor: 'rgb(255, 98, 98)'

                },
                {
                    label: '外派单数',
                    val: 'dispatch',
                    unit: '单',
                    color: 'rgba(255, 199, 28, 1)',
                    icon: 'el-icon-s-cooperation',
                    iconColor: 'rgb(255, 199, 28)'
                },
            ],
            supervisorList: {
                count: 400000, //总数
                domesticAssignment: 2001000, //内派
                dispatch: 2001000, //外派
                income: 200100000000 //总收入
            },
            dataList: []
        }
    },
    methods: {
        changeYear(val) {
            this.$api.getData({ year: val }).then(res => {
                this.hostList = res.data.scheduleSummary.host
                this.supervisorList = res.data.scheduleSummary.supervisor
                // this.basicData = res.data.basicData
                // this.basicData.activityAnalysis = res.data.activityAnalysis
            }).catch(err => {
                this.$message.error(err.message)
            })
        },
        getTopData() {
            this.$api.getData().then(res => {
                this.basicData = res.data.basicData
                this.basicData.activityAnalysis = res.data.activityAnalysis
                this.hostList = res.data.scheduleSummary.host
                this.supervisorList = res.data.scheduleSummary.supervisor
            }).catch(err => {
                this.$message.error(err.message)
            })
        },
        getCahrtData() {
            this.$api.getLineChartData().then(res => {
                this.dataList = res.data
                this.$nextTick(() => {
                    this.initChart()
                })
            }).catch(err => {
                this.$message.error(err.message)
            })
        },
        initChart() {
            let chart = echarts.init(this.$refs.chart1);
            let Maxdata = []
            let max = Math.max(...this.dataList.map(item => item.completed_count))
            const getArrByKey = (data, k) => {
                let key = k || "value";
                let res = [];
                if (data) {
                    data.forEach(function (t) {
                        res.push(t[key]);
                    });
                }
                return res;
            };
            let data = this.dataList.sort((a, b) => {
                return b.completion_rate - a.completion_rate
            });
            let inData = []
            data.forEach((item, index) => {
                inData.push(item.completion_rate)
                Maxdata.push(100)

            })
            let option = {
                grid: {
                    top: '2%',
                    bottom: -15,
                    right: 30,
                    left: -30,
                    containLabel: true
                },
                xAxis: {
                    show: false
                },
                yAxis: [{
                    triggerEvent: true,
                    show: true,
                    inverse: true,
                    data: getArrByKey(data, 'user_name'),
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        color: '#666',
                        align: 'right',
                        margin: 15,
                        fontSize: 13,
                        formatter: function (value, index) {
                            return `{title|` + value + `}`
                        },
                        rich: {
                            // idx0: {
                            //     color: '#FB375E',
                            //     backgroundColor: '#FFE8EC',
                            //     borderRadius: 100,
                            //     padding: [5, 8]
                            // },
                            // idx1: {
                            //     color: '#FF9023',
                            //     backgroundColor: '#FFEACF',
                            //     borderRadius: 100,
                            //     padding: [5, 8]
                            // },
                            // idx2: {
                            //     color: '#01B599',
                            //     backgroundColor: '#E1F7F3',
                            //     borderRadius: 100,
                            //     padding: [5, 8]
                            // },
                            // idx: {
                            //     color: '#333',
                            //     backgroundColor: 'rgba(112, 182, 3, 0.1)',
                            //     borderRadius: 100,
                            //     padding: [5, 8]
                            // },
                            title: {
                                width: 120,
                                backgroundColor: '#fff',
                            }
                        }
                    },
                }, {
                    triggerEvent: true,
                    show: true,
                    inverse: true,
                    data: getArrByKey(data, 'user_name'),
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        color: '#666',
                        align: 'left',
                        margin: 20,
                        fontSize: 13,
                        formatter: function (value, index) {
                            return + data[index].completed_count + '/' + data[index].total_count
                        },
                    }
                }],
                //滚动条
                dataZoom: [
                    {
                        type: "inside",
                        show: false,
                        // type:'slider',
                        startValue: 0,
                        endValue: this.dataList.length,
                        minValueSpan: 9, // 最少展示几组
                        maxValueSpan: 9,
                        yAxisIndex: [0, 1],
                        zoomOnMouseWheel: false, // 关闭滚轮缩放
                        moveOnMouseWheel: true, // 开启滚轮平移
                        moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
                    },
                ],
                // dataZoom: [{
                //     type: 'slider',
                //     yAxisIndex: 0,
                //     zoomLock: true,
                //     width: 10,
                //     height: '80%',
                //     handleSize: 0,
                //     showDetail: false,
                //     start: 0,
                //     end: 30,
                // }, {
                //     type: 'inside',
                //     id: 'insideY',
                //     yAxisIndex: 0,
                //     start: 0,
                //     end: 50,
                //     zoomOnMouseWheel: false,
                //     moveOnMouseMove: true,
                //     moveOnMouseWheel: true
                // }],
                series: [
                    {
                        name: '条',
                        zlevel: 2,
                        type: 'bar',
                        yAxisIndex: 0,
                        data: inData,
                        barWidth: 13,
                        barCategoryGap: 10,
                        label: {
                            show: true,
                            position: 'right',
                            // position:[5,0,0,0],
                            color: '#666',
                            formatter: function (params, index) {
                                return params.value + '%'
                            },
                        },
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                                offset: 0,
                                color: '#3D9FFF'
                            }, {
                                offset: 1,
                                color: '#41D7F3'
                            }], false),
                            barBorderRadius: 30,
                        }
                    },
                    {
                        // name: '条',
                        zlevel: 1,
                        type: 'bar',
                        yAxisIndex: 0,
                        barGap: '-100%',
                        data: Maxdata,
                        barWidth: 13,
                        barCategoryGap: 10,
                        label: {
                            show: false,
                            position: 'right',
                            color: '#666'
                        },
                        itemStyle: {
                            backgroundColor: 'rgba(0, 64, 128, 0.19)',
                            color: 'rgba(0, 64, 128, 0.19)',
                            // color: (val) => {
                            //     if (val.dataIndex < 3 && opt.index === 0) {
                            //         return color[val.dataIndex];
                            //     } else {
                            //         return '#1990FF'
                            //     }
                            // },
                            barBorderRadius: 30,
                        }
                    }
                ]
            };
            chart.setOption(option);
        }
    },
    mounted() {
        this.getTopData()
        this.getCahrtData()
    }
}
</script>
<style lang="less" scoped>
.homeTotal {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .topDiv {
        width: 100%;
        height: 150px;
        margin-bottom: 15px;
        background-color: #fff;

        .titleDiv {
            width: 100%;
            height: 30px;
            display: flex;
            align-items: center;

            .title {
                display: flex;
                align-items: center;
                width: 74.5%;
                padding-left: 10px;
            }

            .title::before {
                content: '';
                display: block;
                width: 4px;
                height: 18px;
                margin-right: 2px;
                background-color: #409EFF;
            }

            .titlelast {
                flex: 1;
            }
        }

        .loopDiv {
            width: 100%;
            margin-top: 5px;
            height: calc(100% - 40px);
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .loopItem {
                width: calc(23% - 40px);
                height: calc(100% - 40px);
                padding: 20px;
                border-radius: 8px;
                position: relative;

                .num {
                    height: 50%;
                    width: 100%;
                    display: flex;
                    align-items: flex-end;
                    justify-content: flex-start;

                    .inNum {
                        font-family: Arial;
                        font-weight: 500;
                        font-size: 30px;
                    }

                    .unit {
                        margin-bottom: 5px;
                        font-size: 14px;
                        margin-left: 3px;
                        // font-weight: 500;
                    }
                }

                .name {
                    height: 50%;
                    width: 100%;
                    display: flex;
                }

                .icon {
                    position: absolute;
                    top: 40%;
                    right: 5%;

                    img {
                        width: 35px;
                        height: 35px;
                        position: relative;
                    }

                    i {
                        color: #fff;
                        position: absolute;
                        left: 50%;
                        top: 20%;
                        font-size: 20px;
                        transform: translateX(-50%);
                    }
                }
            }

            .item1 {
                background-color: rgba(30, 159, 242, 0.1);
            }

            .item2 {
                background-color: rgba(112, 182, 3, 0.1);
            }

            .item3 {
                background-color: rgba(255, 199, 28, 0.1);
            }

            .item4 {
                background-color: rgba(255, 98, 98, 0.1);
            }
        }
    }

    .botDiv {
        width: 100%;
        height: calc(100% - 165px);
        display: flex;

        .leftDiv {
            width: 60%;
            height: calc(100% - 20px);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 10px;
            // gap: 20px 10px;
            overflow-y: auto;
            background-color: #fff;

            .nameDiv {
                width: 100%;
                height: 30px;
                display: flex;
                justify-content: space-between;

                .el-date-editor.el-input {
                    width: 120px;
                }
            }

            .loopDiv {
                width: 100%;
                height: calc(100% - 30px);
                margin-top: 10px;
                .loopIn1 {
                    border: 2px solid rgba(0, 123, 255, 0.2);
                    border-radius: 10px;
                    // width: 100%;
                    padding: 1.25rem;
                    background-color: rgb(230 247 255 / 0.5);

                    .inItem1 {
                        display: flex;
                        align-items: center;
                        font-weight: 700;
                        font-size: 18px;
                        color: #409EFF;
                    }

                    .inItem2 {
                        display: grid;
                        grid-template-columns: repeat(2, minmax(0, 1fr));
                        grid-gap: 10px;
                        margin-top: 10px;

                        .itemInit {
                            height: 80px;
                            padding: 16px;
                            border-radius: 10px;
                            background-color: #fff;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-around;
                        }

                    }

                    // height: 46%;


                    // .item {
                    //     height: 90px;
                    //     padding: 20px;
                    //     border-radius: 10px;
                    // }

                    // .item-1 {
                    //     grid-column: span 2;
                    //     background-color: rgba(132, 0, 255, 0.1);
                    //     display: flex;
                    //     justify-content: space-between;

                    //     .itemIn1 {
                    //         display: flex;
                    //         flex-direction: column;
                    //         align-items: center;
                    //         justify-content: space-around;
                    //         margin-right: 20px;
                    //     }

                    //     .itemIn2 {
                    //         flex: 1;
                    //         display: flex;
                    //         align-items: center;

                    //         span:first-child {
                    //             margin-left: 30px;
                    //             font-size: 30px;
                    //         }
                    //         span:last-child {
                    //             margin-left: 3px;
                    //             font-size: 16px;
                    //         }
                    //     }

                    //     /* 跨越两列，填满第一行 */
                    // }

                    // .item-2 {
                    //     grid-column: span 1;
                    //     background-color: rgba(40, 208, 148, 0.2);
                    //     /* 跨越两列，填满第一行 */
                    // }

                    // .item-3 {
                    //     grid-column: span 1;
                    //     background-color: rgba(112, 182, 3, 0.2);
                    //     /* 跨越两列，填满第一行 */
                    // }

                    // .item-4 {
                    //     grid-column: span 2;
                    //     background-color: rgba(255, 199, 28, 0.2);
                    //     /* 跨越两列，填满第一行 */
                    // }
                }
                .loopI2{
                    margin-top: 10px;
                    border: 2px solid rgba(0, 123, 255, 0.2);
                    background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
                    .inItem1{
                        color: rgb(108 117 125 / var(--tw-text-opacity, 1));
                    }
                }

                // .loopItem {
                //     width: calc(50% - 5px);
                //     margin-bottom: 10px;
                //     height: 120px;
                //     box-sizing: border-box;
                //     margin-right: 10px;
                //     border-radius: 8px;
                //     box-sizing: border-box;
                //     padding: 15px;
                //     display: flex;
                //     flex-direction: column;
                //     justify-content: space-around;

                //     span:first-child {
                //         font-size: 30px;
                //         font-weight: 500;
                //     }

                //     span:last-child {
                //         font-size: 14px;
                //         margin-left: 3px;
                //     }

                //     i {
                //         font-size: 35px;
                //     }

                //     div:last-child {
                //         font-size: 20px;
                //     }
                // }

                // .loopItem:nth-child(2n) {
                //     margin-right: 0px;
                // }
            }


        }

        .rightDiv {
            width: 40%;
            height: calc(100% - 20px);
            margin-left: 10px;
            padding: 10px;
            background-color: #fff;

            .chart {
                width: 100%;
                margin-top: 10px;
                height: calc(100% - 40px);
                overflow-y: auto;
            }
        }
    }
}

.title {
    display: flex;
    align-items: center;
    width: 74.5%;
    padding-left: 10px;
}

.title::before {
    content: '';
    display: block;
    width: 4px;
    height: 18px;
    margin-right: 2px;
    background-color: #409EFF;
}

.el-divider--horizontal {
    margin: 12px 0px !important;
}
</style>